<template>
  <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
    <el-form ref="formRef" :model="childform" :rules="rules">
      <el-form-item label="角色名称">
        <el-input v-model="childform.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="childform.description"
          :rows="4"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="childform.status" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('hide')">取消</el-button>
        <el-button type="primary" @click="submitFn">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { jueSeAddListApi, roleUpdate } from "./api";

// 从父组件传下来的值
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  form: {
    type: Object,
    default: {
      // 用户数
      adminCount: 0,
      //   当前时间
      createTime: "",
      //   描述
      description: "",
      id: 0,
      //   角色名字
      name: "",
      sort: 0,
      //   是否启用  1代表启用 0代表不启用
      status: 1,
    },
  },
});
// 子传父 隐藏的方法
const emit = defineEmits(["hide"]);
// 获取表单的数据
const formRef = ref<FormInstance>();
const childform = reactive<RootModel>({
  // 用户数
  adminCount: 0,
  //   当前时间
  createTime: "",
  //   描述
  description: "",
  id: 0,
  //   角色名字
  name: "",
  sort: 0,
  //   是否启用  1代表启用 0代表不启用
  status: 1,
});
// 如果输入框为空则提示
const rules = {
  name: [{ required: true, trigger: "blur", message: "请填写用户名" }],
  description: [
    { require: true, trigger: "blur", message: "请简单的描述该角色" },
  ],
};

watch(
  () => props.form.id,
  () => {
    childform.adminCount = props.form.adminCount;
    //   当前时间
    childform.createTime = props.form.createTime;
    //   描述
    childform.description = props.form.description;
    childform.id = props.form.id;
    //   角色名字
    childform.name = props.form.name;
    childform.sort = props.form.sort;
    //   是否启用  1代表启用 0代表不启用
    childform.status = props.form.status;
  },
  {
    immediate: true,
  }
);
// 添加数据的函数
const addUser = () => {
  ElMessageBox.confirm("确定要添加用户吗？", "添加用户", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      // 发请求
      jueSeAddListApi(childform).then((res) => {
        if (res.code === 200) {
          // 提示
          ElMessage.success("小伙子，恭喜你,添加成功");
          // 把dialog关闭
          // 刷新数据
          emit("hide");
          // 清空表单
          formRef.value?.resetFields();
        }
      });
    })
    .catch(() => {
      // 清空表单
      formRef.value?.resetFields();
      emit("hide");
    });
};
// 编辑数据的函数
const editUser = () => {
  ElMessageBox.confirm("确定要修改当前用户修改嘛?", "修改用户信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      roleUpdate(childform).then((res) => {
        if (res.code === 200) {
          // 提示+隐藏
          ElMessage.success("修改成功");
          // 清空表单
          formRef.value?.resetFields();
          // 隐藏
          emit("hide", true);
        }
      });
    })
    .catch(() => {
      // 清空表单
      formRef.value?.resetFields();
      // 隐藏

      emit("hide", true);
    });
};
// 这个是最终才添加角色或者编辑角色的按钮提交
const submitFn = () => {
  // 还要再做一次数据的校验
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      if (props.form.id === 0) {
        // 添加
        addUser();
      } else {
        // 编辑
        editUser();
      }
    } else {
      // 提示
    }
  });
};
</script>

<style scoped></style>
